<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline"  class="formInline" ref="formInline"
            label-width="76px" slot="form">
                <el-row :gutter="41">
                        <el-col :span="8">
                            <el-form-item label="状态">
                              <el-select v-model="formInline.typeName" placeholder="请选择" style="width:100%">
                                <el-option v-for="(item,index) in classification" 
                                :key="index" :label="item.name" 
                                 :value="item.id"> </el-option>
                              </el-select>
                            </el-form-item>
                        </el-col>
                        <el-button type="primary" @click="search('formInline')">查询</el-button>
                    </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                     <el-button @click="newEssage">添加教材</el-button>
                </div>
            </div>
           <el-table :data="AnnounceList" style="width: 100%" 
            border v-loading="loading">
                <el-table-column align="center" label="教材名称" min-width="150px">
                    <template scope="scope">
                         <span>{{scope.row.bookName || '--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="学科">
                    <template scope="scope">
                        {{scope.row.subjectName || '--'}}
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="单元/课程" min-width="120px">
                     <template scope="scope">
                        {{scope.row.unitCounts+'个单元 / '+scope.row.chapterCounts+'个课程'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="最后更新时间">
                     <template scope="scope">
                        {{scope.row.updateTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="更新教师">
                     <template scope="scope">
                        {{scope.row.updator || '--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="状态">
                     <template scope="scope">
                        {{scope.row.status=='0' ? '已停用' : '已启用'}}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" width="160px">
                    <template scope="scope">
                        <el-button  type="text" class="btn-success" :disabled="scope.row.status=='1'" @click="editTeaching(scope.row.bookId)">修改</el-button>
                        <el-button  type="text" class="btn-success" @click="deleteListOne(scope.row)" v-if="scope.row.status=='0'">启用</el-button>
                        <el-button  type="text" class="btn-success" @click="deleteListOne(scope.row)" v-if="scope.row.status=='1'">停用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
// import editDialog from './editDialog';
import {queryMany, update} from 'api/schoolResources';
export default {
    name: 'essayList',
    components: { TableLayout },
    data() {
        return {
            formInline: {
                typeName: '' // 类别名称
            },
            classification: [
                {
                    id: '',
                    name: '请选择'
                },
                {
                    id: '1',
                    name: '已启用'
                },
                {
                    id: '0',
                    name: '已停用'
                }
            ],
            AnnounceList: [],
            loading: true, // 查询时的加载提示
            listQuery: { // 分页
                page: 1,
                total: 0
            },
            editData: {
                dialogEdit: false
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters(['uid', 'schoolId', 'roleType'])
    },
    created() {
        this.searchFetchData();
        // this.selectTypeName();
    },
 
    methods: {
        ...mapActions(['ChangePageSize']),
        searchAll() {
            this.searchFetchData();
            this.selectTypeName();
        },
        // 点击编辑分类
        editClassification() {
            this.editData.dialogEdit = true;
        },
            // 新建文章
        newEssage() {
            this.$router.push('addTeaching')
        },
         // 单个删除
        deleteListOne(row) {
            let status = row.status=='0' ? '教材启用，教师可以使用该教材' : '教材停用后，教师将无法进入并使用该教材及教材中的课件，资料';
            let status2 = row.status=='0' ? '启用' : '停用';
            this.$confirm(status, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ' // warning
            }).then(() => {
                update(row.bookId).then(res => {
                    this.$message.success(status2+'成功');
                    this.searchFetchData();
                });
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let curPage = this.listQuery.page,
                pageSize = this.config.pageSize,
                schoolId=this.schoolId,
                typeId=this.formInline.typeName;
            queryMany(curPage, pageSize, schoolId, typeId).then(res => {
                this.AnnounceList=res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            }).catch(() => {
                this.loading=false
            });
        },
        editTeaching(id) {
            this.$confirm('修改后将覆盖原来的教材', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ' // warning
            }).then(() => {
                this.$router.push({path: `/schoolResources/editTeaching/${id}`})
            }).catch(() => {
                this.$message.info('已取消');
            });
            
        },
        // 查询列表
        search() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
          // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../../styles/var';

.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>


